import React, { lazy, Suspense } from 'react'
import { Redirect, Route, Switch } from 'react-router-dom'
import ROUTES from 'constants/routes'
import Recommed from './Recommend'
const RecommedDaily = lazy(() => import('./RecommendDaily'))
const SongList = lazy(() => import('./Songlist'))
const Singers = lazy(() => import('./Singers'))
const LatestMusic = lazy(() => import('./LatestMusic'))
const leaderBorad = lazy(() => import('./LeaderBoard'))

const Discovery = () => {
  return (
    <Suspense fallback={null}>
      <Switch>
        <Route exact path={ROUTES.DISCOVERY} component={Recommed} />
        <Route exact path={ROUTES.RECOMMEND} component={Recommed} />
        <Route path={ROUTES.RECOMMEND_DAILY} component={RecommedDaily} />
        <Route path={ROUTES.SINGERS} component={Singers} />
        <Route path={ROUTES.SONG_LIST} component={SongList} />
        <Route path={ROUTES.LATEST_MUSIC} component={LatestMusic} />
        <Route path={ROUTES.LEADER_BOARD} component={leaderBorad} />
        <Redirect from={`${ROUTES.DISCOVERY}/*`} to={ROUTES.DISCOVERY} />
      </Switch>
    </Suspense>
  )
}
export default Discovery
